<template>
  <div class="mainContent">
    <div class="top">
      <img :src="data.user.head_img" alt />
      <div class="info">
        <div class="author">{{data.user.nickname}}</div>
        <div class="date">{{data.user.create_date.split('T')[0]}}</div>
      </div>
      <div class="rlyBtn" @click="callRly">回复</div>
    </div>
    <Parent v-if="data.parent" :parentdata="data.parent"></Parent>
    <div class="mainContent">{{data.content}}</div>
  </div>
</template>

<script>
import Parent from "./parent";
import Bus from '../../utis/bus'
export default {
  props: ["data"],
  components: {
    Parent,
  },
  methods:{
      callRly(){
          console.log(this.data.id);
          Bus.$emit('callRly',this.data.id)
      }
  }
};
</script>

<style lang="less">
.mainContent{
    padding: 10/360*100vw;
    border-bottom: 1px solid #cccccc;
    .top{
        padding: 10/360*100vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
        img{
            width: 38/360*100vw;
            height: 38/360*100vw;
            object-fit: cover;
            border-radius: 50%;
        }
        .info{
            flex: 1;
            margin-left:20/360*100vw ;
            .author{
                font-size: 16px;
                color:black;
            }
            .date{
                font-size: 14/360*100vw;
                color: #888;
                margin-top: 10/360*100vw;
            }        
            }
        .rlyBtn{
            font-size: 12px;
            color: #888;
        }
    }
    .mainContent{
        color: #333;
        font-size: 14px;
        border: none;
    }
}
</style>